<script setup>

import {computed} from "vue";
import {formatBytes} from "@/utils/ByteUtil";
import {Refresh} from "@element-plus/icons-vue";

const props = defineProps({
  total: Number,
  use:Number
});

const totalValue = computed(()=>{
  return formatBytes(props.total)
})

const useValue = computed(()=>{
  return formatBytes(props.use)
})

const percentageValue = computed(()=>{
  return (props.use / props.total * 100).toFixed(2);
})

</script>

<template>
  <div class="d1" style="display: flex">
    <div class="dd1" style="display: flex;">
      <span style="font-size: 10px;cursor: pointer">空间使用</span>
    </div>
    <div class="dd2" style="display: flex;justify-content: flex-end;margin-left: auto;margin-right: 15px">
      <div style="display: flex;justify-content: flex-end;cursor: pointer"><el-icon size="15"><Refresh /></el-icon></div>
    </div>
  </div>
  <div class="d2">
    <el-progress :percentage="percentageValue" style="width: 160px;cursor: pointer" />
  </div>
  <div class="d3">
    <span style="font-size: 10px;cursor: pointer">{{useValue}} / {{totalValue}}</span>
  </div>
</template>

<style scoped lang="scss">
.d2 {
  margin-top: 3px;
}
.d3{
  margin-top: 1px;
}
</style>